<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天天生鲜-Freh Everyday</title>
    <link rel="shortcut icon" href="./images/logo02.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="top-nav">
        <ul class="row">
            <li>欢迎来到天天生鲜!</li>
            <li class="space"></li>
            <li>登录</li>
            <li>|</li>
            <li>注册</li>
            <li>|</li>
            <li>用户中心</li>
            <li>|</li>
            <li>我的购物车</li>
            <li>|</li>
            <li>我的订单</li>
        </ul>
    </div>
    <div class="main">
        <div class="top-search">
            <img src="./images/logo.png" alt="">
            <div class="serch-box">
                <input type="text" placeholder="请输入商品名称">
                <span>搜索</span>
            </div>
            <div class="cart-box">
                <div class="cart-text">我的购物车</div>
                <div class="cart-num">1</div>
            </div>
        </div>
    </div>
    <div class="cate-titbox">
         <ul class="cate">
            <h2>全部商品</h2>
            <li>手机</li>
            <li>|</li>
            <li>手机生鲜</li>
            <li>|</li>
            <li>抽奖</li>
        </ul>
    </div>
    <div class="slider-box">
        <ul>
            <li>新鲜水果</li>
            <li>海鲜水产</li>
            <li>猪肉羊肉</li>
            <li>禽类蛋类</li>
            <li>新鲜蔬菜</li>
            <li>速冻食品</li>
        </ul>
        <div class="slider">
            <div class="arrow-left"></div>
            <div class="arrow-right"></div>
            <div class="slider-item">
                <img src="./images/slide01.jpg">
                <img src="./images/slide02.jpg">
                <img src="./images/slide03.jpg">
            </div>
            
        </div>
        <div class="adver">
            <img src="./images/adv01.jpg">
            <img src="./images/adv02.jpg">
        </div>         
    </div>

    <div class="g-tit">
        <div class="tit">新鲜水果</div>
        <div>|</div>
        <div>鲜芒</div>
        <div>加州提子</div>
        <div>亚马逊牛油果</div>
        <div class="space"></div>
        <div>查看更多 > </div>
    </div>
    <div class="g-list">
        <div class="g-cate"></div>
        <div class="g-goods">
            <div class="tit">草莓</div>
            <img src="./images/goods/goods003.jpg" alt="">
            <div class="price">￥30.00</div>
        </div>
        <div class="g-goods">
            <div class="tit">葡萄</div>
            <img src="./images/goods/goods002.jpg" alt="">
            <div class="price">￥5.50</div>
        </div>
        <div class="g-goods">
            <div class="tit">柠檬</div>
            <img src="./images/goods/goods001.jpg" alt="">
            <div class="price">￥3.90</div>
        </div>
        <div class="g-goods">
            <div class="tit">奇异果</div>
            <img src="./images/goods/goods012.jpg" alt="">
            <div class="price">￥25.80</div>
        </div>
    </div>

    <div class="g-tit">
        <div class="tit">新鲜水产</div>
        <div>|</div>
        <div>河虾</div>
        <div>扇贝</div>
        <div class="space"></div>
        <div>查看更多 > </div>
    </div>
    <div class="g-list">
        <div class="g-cate" style="background: url(./images/banner02.jpg);"></div>
        <div class="g-goods">
            <div class="tit">青岛野生海捕大青虾</div>
            <img src="./images/goods/goods018.jpg" alt="">
            <div class="price">￥48.00</div>
        </div>
        <div class="g-goods">
            <div class="tit">扇贝</div>
            <img src="./images/goods/goods019.jpg" alt="">
            <div class="price">￥46.00</div>
        </div>
        <div class="g-goods">
            <div class="tit">冷冻秋刀鱼</div>
            <img src="./images/goods/goods020.jpg" alt="">
            <div class="price">￥19.00</div>
        </div>
        <div class="g-goods">
            <div class="tit">基围虾</div>
            <img src="./images/goods/goods021.jpg" alt="">
            <div class="price">￥25.00</div>
        </div>
    </div>
    <div class="g-tit">
        <div class="tit">猪牛羊肉</div>
        <div>|</div>
        <div>猪肉</div>
        <div>羊肉</div>
        <div>牛肉</div>
        <div class="space"></div>
        <div>查看更多 > </div>
    </div>
    <div class="g-list">
        <div class="g-cate" style="background: url(./images/banner03.jpg);"></div>
        <div class="g-goods">
            <div class="tit">黑香猪五花肉</div>
            <img src="./images/goods/goods022.jpg" alt="">
            <div class="price">￥23.00</div>
        </div>
        <div class="g-goods">
            <div class="tit">牛肩肉</div>
            <img src="./images/goods/goods023.jpg" alt="">
            <div class="price">￥41.00</div>
        </div>
        <div class="g-goods">
            <div class="tit">濮阳🐏肉</div>
            <img src="./images/goods/goods024.jpg" alt="">
            <div class="price">￥22.00</div>
        </div>
        <div class="g-goods">
            <div class="tit">好吃的牛排</div>
            <img src="./images/goods/goods025.jpg" alt="">
            <div class="price">￥55.00</div>
        </div>
    </div>
    <div class="g-tit">
        <div class="tit">禽类蛋品</div>
        <div>|</div>
        <div>蛋类</div>
        <div>肉类</div>
        <div>禽类</div>
        <div class="space"></div>
        <div>查看更多 > </div>
    </div>
    <div class="g-list">
        <div class="g-cate" style="background: url(./images/banner04.jpg);"></div>
        <div class="g-goods">
            <div class="tit">鸡蛋</div>
            <img src="./images/goods/goods026.jpg" alt="">
            <div class="price">￥5.00</div>
        </div>
        <div class="g-goods">
            <div class="tit">鸡胸肉</div>
            <img src="./images/goods/goods027.jpg" alt="">
            <div class="price">￥6.90</div>
        </div>
        <div class="g-goods">
            <div class="tit">蜜制咸鸭蛋</div>
            <img src="./images/goods/goods028.jpg" alt="">
            <div class="price">￥14.00</div>
        </div>
        <div class="g-goods">
            <div class="tit">琛腿</div>
            <img src="./images/goods/goods029.jpg" alt="">
            <div class="price">￥6.00</div>
        </div>
    </div>
    <div class="g-tit">
        <div class="tit">新鲜蔬菜</div>
        <div>|</div>
        <div>有机绿色蔬菜</div>
        <div>新鲜果蔬</div>
        <div class="space"></div>
        <div>查看更多 > </div>
    </div>
    <div class="g-list">
        <div class="g-cate" style="background: url(./images/banner05.jpg);"></div>
        <div class="g-goods">
            <div class="tit">白菜</div>
            <img src="./images/goods/goods030.jpg" alt="">
            <div class="price">￥0.70</div>
        </div>
        <div class="g-goods">
            <div class="tit">芹菜</div>
            <img src="./images/goods/goods031.jpg" alt="">
            <div class="price">￥2.90</div>
        </div>
        <div class="g-goods">
            <div class="tit">香菜</div>
            <img src="./images/goods/goods032.jpg" alt="">
            <div class="price">￥5.90</div>
        </div>
        <div class="g-goods">
            <div class="tit">冬瓜</div>
            <img src="./images/goods/goods033.jpg" alt="">
            <div class="price">￥0.99</div>
        </div>
    </div>
    <div class="g-tit">
        <div class="tit">速冻食品</div>
        <div>|</div>
        <div>火锅丸子</div>
        <div>冷冻蔬菜</div>
        <div>冷冻肉类</div>
        <div class="space"></div>
        <div>查看更多 > </div>
    </div>
    <div class="g-list">
        <div class="g-cate" style="background: url(./images/banner06.jpg);"></div>
        <div class="g-goods">
            <div class="tit">火锅丸子</div>
            <img src="./images/goods/goods034.jpg" alt="">
            <div class="price">￥5.70</div>
        </div>
        <div class="g-goods">
            <div class="tit">蟹棒</div>
            <img src="./images/goods/goods035.jpg" alt="">
            <div class="price">￥5.90</div>
        </div>
        <div class="g-goods">
            <div class="tit">手拍虾丸</div>
            <img src="./images/goods/goods036.jpg" alt="">
            <div class="price">￥5.89</div>
        </div>
        <div class="g-goods">
            <div class="tit">蒸饺</div>
            <img src="./images/goods/goods037.jpg" alt="">
            <div class="price">￥7.69</div>
        </div>
    </div>
    <div class="bottom">
        <div>
            <ul class="row">
                <li>关于我们</li>
                <li>|</li>
                <li>联系我们</li>
                <li>|</li>
                <li>招聘人才</li>
            </ul>
            <p>
                CopyRight&copy; 2023 22级移动应用开发
            </p>
            <p>
                电话：13412345678&nbsp;&nbsp;QQ:610046284@qq.com
            </p>
        </div>
    </div>
</body>
<script src="./js/jquery-3.6.3.js"></script>
<script>
    $(document).ready(function () {
        let sliderIndex=0;
        function changeSlider(idx=0) {
            let $sliderItems=$(".slider-item img");
            for (let i = 0; i < $sliderItems.length; i++) {
                if (i==idx) {// 调用方法的参数idx和i相等 显示对应元素图片
                    $($sliderItems[i]).slideDown(500)                    
                }else{//否则隐藏
                    $($sliderItems[i]).slideUp(500)
                }
                
            }
        }
        changeSlider(sliderIndex);//默认显示第一张图片
        // 左切换
        $(".arrow-left").click(function () {
            // sliderIndex-1 显示前面一张图片 但是怕遇到问题 已经到了第一张图片 怎么切换到最后一张
                 sliderIndex= sliderIndex-1;
                if(sliderIndex<0){ // 显示的索引小于0 给你赋值成最后一个图片的索引
                    sliderIndex=$(".slider-item img").length-1; // 选择器长度3 有3张图片
                    // 第三张图片索引是3-1
                }
                // showIndex已经是将要显示的图片索引了
                changeSlider(sliderIndex)
            })
            // 右切换
            $(".arrow-right").click(function () {
                 sliderIndex= sliderIndex+1;
                if(sliderIndex>=$(".slider-item img").length){ 
                    sliderIndex=0; 
                }
                changeSlider(sliderIndex)
            })
            // 自动播放功能
            setInterval(() => {
                sliderIndex++;
                if(sliderIndex>=$(".slider-item img").length){ 
                    sliderIndex=0; 
                }
                changeSlider(sliderIndex)
            }, 2000);
    })
</script>
</html>